<template>
    <div class="history-suggestion">
        <van-cell
            icon="search"
            title="搜索历史"
        >
            <div v-if="isDeteleShow">
                <span @click="$emit('update-histories',[])">全部删除</span>
                &nbsp;&nbsp;
                <span @click="isDeteleShow=false">完成</span>
            </div>
            <van-icon 
                v-else 
                name="delete-o"
                @click="isDeteleShow=true"
            />
        </van-cell>
        <van-cell
            :title="item"
            v-for="(item,index) in searchHistories"
            :key="index"
            @click="onDelete(item,index)"
        >
            <van-icon v-show="isDeteleShow" name="close" />
        </van-cell>
    </div>
</template>
<script>
export default {
    name:'history-suggestion',
    props:{
        searchHistories:{
            type:Array,
            required:true
        }
    },
    data() {
        return {
            isDeteleShow:false
        }
    },
    methods: {
        onDelete(item,index){
            if(this.isDeteleShow){
                this.searchHistories.splice(index,1)
                //setItem('search-histories',this.searchHistories)
                return
            }
            
            this.$emit('search',item)
            
        }
    },
}
</script>
<style lang="less" scoped>

</style>